<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/wzh3.css">
</head>
<body>
     <!-- 顶部导航栏 -->
   <div class="u3">
        <div class="u4">
            <span><img class="u2" src="./img/tu/microsoft.svg" alt=""></span>
            <span>|</span>
            <span><b>微软官方商城</b></span>
            <span>硬件</span>
            <span>软件</span>
            <span>教育优惠</span>
            <span>企业购</span>
            <span>折扣专区</span>
            <span>领卷中心</span>
            <span>Surface</span>
            <span>更多</span>
        </div>
        <div class="u1">
            <span>搜索<img src="./img/tu/fangdajing.png" alt=""></span>
            <span><img src="./img/tu/gouwuche.png" alt=""></span>
            <span class="login - text">登录<img class="img-element" src="./img/tu/touxiang.png" alt=""></span>
        </div>
    </div>

  <!-- 产品展示区 -->
  <div class="product-section">
    <img src="./img/tu/changtu.avif" alt="Xbox Series S" style="width: 80%;height: 422px;">
    <div class="kk2">
        <h2>全新 Xbox Series S</h2>
        <p>精巧小身材，畅玩新世代</p>
        <a href="#" class="btn">了解更多 ></a>
    </div>
  </div>

  <!-- 热门免费游戏展示区 -->
  <div class="game-section">
    <h2>热门免费游戏</h2>
    <p>显示第 1 - 6 个商品，共 10 商品 <a href="#">查看全部 ></a></p>
    <div class="game-carousel">
      <div class="game-item">
        <img src="./img/tu/tu1.jpg" alt="Minecraft Launcher">
        <p>Minecraft Launcher</p>
        <p>免费获取*</p>
      </div>
      <div class="game-item">
        <img src="./img/tu/tu2.jpg" alt="使命召唤：战区">
        <p>使命召唤：战区</p>
        <p>免费获取*</p>
      </div>
      <div class="game-item">
        <img src="./img/tu/tu3.jpg" alt="Crazy Punk">
        <p>Crazy Punk</p>
        <p>免费获取*</p>
      </div>
      <div class="game-item">
        <img src="./img/tu/tu4.jpg" alt="Hill Climb Racing">
        <p>Hill Climb Racing</p>
        <p>免费获取*</p>
      </div>
      <div class="game-item">
        <img src="./img/tu/tu5.jpg" alt="Microsoft Mahjong">
        <p>Microsoft Mahjong</p>
        <p>免费获取*</p>
      </div>
      <div class="game-item">
        <img src="./img/tu/tu6.jpg" alt="Microsoft Jigsaw">
        <p>Microsoft Jigsaw</p>
        <p>免费获取*</p>
      </div>
    </div>
  </div>

  <!-- 最高评分的游戏展示区 -->
  <div class="game-section">
    <h2>最高评分的游戏</h2>
    <p>显示第 1 - 6 个商品，共 9 商品 <a href="#">查看全部 ></a></p>
    <div class="game-carousel">
      <div class="game-item">
        <img src="./img/tu/tu7.jpg" alt="Jewel Matter">
        <p>Jewel Matter</p>
        <p>免费获取*</p>
      </div>
      <div class="game-item">
        <img src="./img/tu/tu8.jpg" alt="爱拍电影">
        <p>爱拍电影</p>
        <p>免费获取*</p>
      </div>
      <div class="game-item">
        <img src="./img/tu/tu9.jpg" alt="疯狂填字">
        <p>疯狂填字</p>
        <p>免费获取*</p>
      </div>
      <div class="game-item">
        <img src="./img/tu/tu10.jpg" alt="What Remains of Edith Finch">
        <p>What Remains of Edith Finch</p>
        <p>¥144.00</p>
      </div>
      <div class="game-item">
        <img src="./img/tu/tu11.jpg" alt="Cash Billionaire">
        <p>Cash Billionaire</p>
        <p>免费获取*</p>
      </div>
      <div class="game-item">
        <img src="./img/tu/tu12.jpg" alt="Global City">
        <p>Global City</p>
        <p>免费获取*</p>
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <div class="footer">
    <ul class="footer-column">
      <li><b><a href="#">新增内容</a></b></li>
      <li><a href="#">Surface Pro</a></li>
      <li><a href="#">Surface Laptop</a></li>
      <li><a href="#">Surface Pro 9</a></li>
      <li><a href="#">Surface Laptop 5</a></li>
      <li><a href="#">Microsoft 365</a></li>
      <li><a href="#">Windows 11 家庭版</a></li>
    </ul>
    <ul class="footer-column">
      <li><b><a href="#">Microsoft Store</a></b></li>
      <li><a href="#">帐户个人资料</a></li>
      <li><a href="#">下载中心</a></li>
      <li><a href="#">订单跟踪</a></li>
      <li><a href="#">Microsoft 教育版</a></li>
      <li><a href="#">Microsoft 365 教育版</a></li>
      <li><a href="#">Office 教育版</a></li>
    </ul>
    <ul class="footer-column">
      <li><b><a href="#">教育</a></b></li>
      <li><a href="#">Microsoft 教程</a></li>
      <li><a href="#">教育设备</a></li>
      <li><a href="#">Microsoft Teams 教育版</a></li>
      <li><a href="#">教师培训</a></li>
      <li><a href="#">教育工作者培训开发</a></li>
      <li><a href="#">面向学生和家长的优惠</a></li>
    </ul>
    <ul class="footer-column">
      <li><b><a href="#">企业</a></b></li>
      <li><a href="#">Microsoft Cloud</a></li>
      <li><a href="#">Microsoft 安全</a></li>
      <li><a href="#">Dynamics 365</a></li>
      <li><a href="#">Microsoft 365</a></li>
      <li><a href="#">Microsoft Advertising</a></li>
      <li><a href="#">Microsoft 365 Copilot</a></li>
    </ul>
    <ul class="footer-column">
      <li><b><a href="#">开发人员与 IT</a></b></li>
      <li><a href="#">Microsoft 开发人员</a></li>
      <li><a href="#">Microsoft Learn</a></li>
      <li><a href="#">支持 AI 商城应用</a></li>
      <li><a href="#">Microsoft 技术社区</a></li>
      <li><a href="#">Azure</a></li>
      <li><a href="#">Azure 平台</a></li>
    </ul>
    <ul class="footer-column">
      <li><b><a href="#">公司</a></b></li>
      <li><a href="#">关于 Microsoft</a></li>
      <li><a href="#">公司新闻</a></li>
      <li><a href="#">Microsoft 隐私</a></li>
      <li><a href="#">投资人</a></li>
      <li><a href="#">可持续发展</a></li>
    </ul>
  </div>
  <div class="x1">
        <img class="m1" src="./img/tu/地球,地理,全球.png" alt="">
        <span> 中国 - 简体中文</span>
        <span>使用条款 销售条款 隐私权声明 管理 Cookie 商标 沪 ICP备12038052号-4</span>
        <span><img src="./img/tu/beianbgs_20220830.png" alt=""></span>
        <span>沪公网安备 31010402009788号 公司证件 © 2024 Microsoft</span>
    </div>
</body>
</html>